<template>
  <van-row>
    <van-nav-bar left-arrow @click-left="onClickLeft">
    </van-nav-bar>

    <div class="div_login_body">
      <van-form @submit="onSubmit">
        <van-row>
          <van-col span="24">
            <van-field required v-model.trim="username" name="username" label="用户名" placeholder="请输入用户名"
              :rules="[{ required: true, message: '请填写用户名' }]" />
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <van-field required v-model.trim="name" name="name" label="姓名" placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]" />
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <van-field required v-model.trim="password" type="password" name="password" label="密码" placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
          </van-col>
        </van-row>
        <van-row>
          <van-col :span="24">
            <van-field required v-model.trim="comfirmPassword" name="title" type="password" label="确认密码"
              placeholder="请输入确认密码"
              :rules="[{ required: true, validator: validatorNewPswd, message: '两次密码输入不一致，请重新输入' }]" />
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <van-field required v-model.trim="email" name="email" label="邮箱" placeholder="请输入邮箱"
              :rules="[{ required: true, message: '请填写邮箱地址' }]" />
          </van-col>
        </van-row>
        <van-row style="margin: 16px;" gutter="10">

          <van-col span="24">
            <van-button round block plain type="primary" native-type="submit">
              注册
            </van-button>
          </van-col>
        </van-row>
      </van-form>
    </div>
  </van-row>
</template>

<script>
  import {
    Form,
    Field,
    Button,
    Toast,
    Row,
    Col,
    NavBar,
  } from 'vant';
  export default {
    name: 'Register',
    components: {
      'van-form': Form,
      'van-field': Field,
      'van-button': Button,
      'van-row': Row,
      'van-col': Col,
      'van-nav-bar': NavBar,
    },
    data: function () {
      return {
        username: "", //用户名
        name: '', //姓名
        password: "", //密码
        comfirmPassword: "", //确认密码
        email: '', //邮件
      }
    },
    methods: {
      validatorNewPswd(val) {
        return this.password === this.comfirmPassword;
      },
      //提交登录
      async onSubmit(values) {
        var res = await this.$ajax.post("/api/user/register", {
          userName: this.username,
          password: this.$rsaEncrypt(this.password),
          name: this.name,
          email: this.email
        });
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          Toast.success('注册完成');
          this.$router.push({
            path: '/login'
          });
        }
      },
      onClickLeft() {
        this.$router.replace('login');
      }
    },
    mounted() {
      //显示底部栏
      this.$store.commit('updateShowFoot', false)
    }
  }

</script>
